﻿<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%;">

<head>
  <meta charset="UTF-8" />
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
  <script>

    var pixel = 1 / window.devicePixelRatio;

    document.write('<meta name="viewport" content="width=device-width,initial-scale=' + pixel + ',' + 'minimum-scale=' + pixel + ',' + 'maximum-scale=' + pixel + '">')

  </script>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>bigdata</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body style="width: 100%;height: 100%;">
  <div id="load">
    <div class="load_img">
      <!-- 加载动画 -->
      <img class="jzxz1" src="images/jzxz1.png">
      <img class="jzxz2" src="images/jzxz2.png">
    </div>
  </div>
  <div id="app" style="width: 100%;height: 100%;">
    <header style="width: 100%; height: 10%;">
      <h1>数据可视化看板</h1>
      <div class="showTime">当前时间：<span></span></div>
    </header>
    <section class="mainbox">
      <div class="column">
        <div class="panel pie">
          <h2>台秤在线率-故障率</h2>
          <div class="chart">
            <div class="sy" id="echarts6"></div>
            <div class="sy" id="echarts7"></div>
            <!-- <div class="sy" id="echarts8"></div> -->
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel bar1">
          <h2 style="height: 10%;">各省产品销量排行 </h2>
          <div class="chart" id="paihang-chart"></div>
          <div class="panel-footer"></div>
        </div>


 


        <div class="panel bar">
          <h2>
            各台秤数量 
          </h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>125811</li>
              <li>104563</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>台秤总数</li>
              <li>在线总数</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div id="china_map" class="chart"></div>
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
        </div>
      </div>
      <div class="column">
        <div class="panel pie1">
          <h2>各地区台秤占比</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line">
          <h2>台秤总数年变化</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line1">
          <h2>电子秤订单</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>

      </div>
    </section>

  </div>


  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <script src="js/jquery.min.js"></script>

  <script src="js/china.js"></script>

  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>


  <script>

    (function (fn) {
      fn();
      setInterval(fn, 1000);
    })(function () {
      var dt = new Date();
      y = dt.getFullYear();
      mt = dt.getMonth() + 1;
      document.querySelector(".showTime span").innerHTML =

        y + "年" +
        mt + "月" +
        dt.getDate() + "日-" +
        dt.getHours() + "时" +
        dt.getMinutes() + "分" +
        dt.getSeconds() + "秒";
    });
  </script>

  <!-- vue代码-->
  <script>
    var app = new Vue({
      el: '#app',
      data: function () {
        return {
          //echart 配制option  
          options: {
            // backgroundColor: '#404a59',
            tooltip: {
              triggerOn: "mousemove",   //mousemove、click
              padding: 8,
              borderWidth: 1,
              borderColor: '#409eff',
              backgroundColor: 'rgba(255,255,255,0.7)',
              textStyle: {
                color: '#000000',
                fontSize: 13
              },
              formatter: function (e, t, n) {
                let data = e.data;
                let context = `
                      <div>
                          <p><b style="font-size:15px;">${data.name}</b></p>
                          <p class="tooltip_style"><span class="tooltip_left">台秤总数：</span><span class="tooltip_right">${data.value}</span></p>
                          <p class="tooltip_style"><span class="tooltip_left">在线总数：</span><span class="tooltip_right">${data.orgnum}</span></p>
                      </div>
                    `
                return context;
              }
            },
            visualMap: {
              show: true,
              left: 26,
              bottom: 40,
              showLabel: true,
              textStyle: {
                color: '#fff'
              },
              pieces: [
                {
                  gte: 100,
                  label: ">= 1000",
                  color: "#1f307b"
                },
                {
                  gte: 500,
                  lt: 999,
                  label: "600 - 999",
                  color: "#3c57ce"
                },
                {
                  gte: 100,
                  lt: 499,
                  label: "300 - 599",
                  color: "#6f83db"
                },
                {
                  gte: 10,
                  lt: 99,
                  label: "100 - 399",
                  color: "#9face7"
                },
                {
                  lt: 10,
                  label: '<100',
                  color: "#bcc5ee"
                }
              ]
            },
            geo: {
              map: "china",
              scaleLimit: {
                min: 1,
                max: 2
              },
              zoom: 1,
              top: 120,
              label: {
                normal: {
                  show: true,
                  fontSize: "14",
                  color: "rgba(0,0,0,0.7)"
                }
              },
              itemStyle: {
                normal: {
                  //shadowBlur: 50,
                  //shadowColor: 'rgba(0, 0, 0, 0.2)',
                  borderColor: "rgba(0, 0, 0, 0.2)"
                },
                emphasis: {
                  areaColor: "#f2d5ad",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  borderWidth: 0
                }
              }
            },
            series: [
              {
                name: "台秤总数",
                type: "map",
                geoIndex: 0,
                data: []
              }
            ]
          },
          //echart data
          dataList: [
            {
              name: "南海诸岛",
              value: 100,
              eventTotal: 100,
              specialImportant: 10,
              import: 10,
              compare: 10,
              common: 40,
              specail: 20
            },
            {
              name: "北京",
              value: 540,
              orgnum: 100,
            },
            {
              name: "天津",
              value: 130
            },
            {
              name: "上海",
              value: 400
            },
            {
              name: "重庆",
              value: 750
            },
            {
              name: "河北",
              value: 130
            },
            {
              name: "河南",
              value: 830
            },
            {
              name: "云南",
              value: 110
            },
            {
              name: "辽宁",
              value: 19
            },
            {
              name: "黑龙江",
              value: 150
            },
            {
              name: "湖南",
              value: 690
            },
            {
              name: "安徽",
              value: 60
            },
            {
              name: "山东",
              value: 39
            },
            {
              name: "新疆",
              value: 4
            },
            {
              name: "江苏",
              value: 31
            },
            {
              name: "浙江",
              value: 104
            },
            {
              name: "江西",
              value: 36
            },
            {
              name: "湖北",
              value: 52
            },
            {
              name: "广西",
              value: 33
            },
            {
              name: "甘肃",
              value: 7
            },
            {
              name: "山西",
              value: 5
            },
            {
              name: "内蒙古",
              value: 778
            },
            {
              name: "陕西",
              value: 22
            },
            {
              name: "吉林",
              value: 4
            },
            {
              name: "福建",
              value: 18
            },
            {
              name: "贵州",
              value: 5
            },
            {
              name: "广东",
              value: 98
            },
            {
              name: "青海",
              value: 1
            },
            {
              name: "西藏",
              value: 0
            },
            {
              name: "四川",
              value: 44
            },
            {
              name: "宁夏",
              value: 4
            },
            {
              name: "海南",
              value: 22
            },
            {
              name: "台湾",
              value: 3
            },
            {
              name: "香港",
              value: 5
            },
            {
              name: "澳门",
              value: 555
            }
          ],




          v0: 1000,
          v1: 353,
          v2: 178,
          // v3 : 100,

        }
      },
      created() {
        this.setEchartOption();
      },
      mounted: function () {

        this.$nextTick(() => {
          this.initEchartMap();
        })

        //删除加载动画
        $('#load').fadeOut(1000)
        setTimeout(function () {
          $('#load').remove()
        }
          , 1100);


        // var that = this;


        this.myChart6();
          this.myChart7();
          this.myChartPaihang()


      },
      updated() {

      },
      methods: {

        //初始化中国地图
        initEchartMap() {
          let mapDiv = document.getElementById('china_map');
          let myChart = echarts.init(mapDiv);
          myChart.setOption(this.options);
        },
        //修改echart配制
        setEchartOption() {
          this.options.series[0]['data'] = this.dataList;
        },




        // 环图
        myChart6() {
          var that = this;
          var myChart6 = echarts.init(document.getElementById('echarts6'));
          option6 = {
            series: [{
              type: 'pie',
              radius: ['70%', '80%'],
              color: '#0088cc',
              label: {
                normal: {
                  position: 'center'
                }
              },
              data: [{
                value: that.v1,

              },
              {
                value: that.v0,
                name: '在线率',
                label: {
                  normal: {
                    formatter: function (params) {
                      return Math.round(that.v1 / that.v0 * 100) + '%'
                    },
                    textStyle: {
                      fontSize: 20,
                      color: '#fff',
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: 'rgba(255,255,255,.2)'
                  },
                  emphasis: {
                    color: '#fff'
                  }
                },
              }]
            }]

          };
          myChart6.setOption(option6);
        },
        myChart7() {
          var that = this;
          var myChart7 = echarts.init(document.getElementById('echarts7'));
          option7 = {
            series: [{
              type: 'pie',
              radius: ['70%', '80%'],
              color: '#fccb00',
              label: {
                normal: {
                  position: 'center'
                }
              },
              data: [{
                value: that.v2,
              },
              {
                value: that.v0,
                name: '维修率',
                label: {
                  normal: {
                    formatter: function (params) {
                      return + Math.round(that.v2 / that.v0 * 100) + '%'
                    },
                    textStyle: {
                      fontSize: 20,
                      color: '#fff',
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: 'rgba(255,255,255,.2)'
                  },
                  emphasis: {
                    color: '#fff'
                  }
                },
              }]
            }]
          };
          myChart7.setOption(option7);
        },
        //进度条1
        myChartPaihang() {
          var progress1chart = echarts.init(document.getElementById("paihang-chart"));
          var baifenbi = [0.333, 0.444, 0.555, 0.777, 0.888];
          var grayBar = [1, 1, 1, 1, 1,];
          var paiming = [5, 4, 3, 2, 1];
          var xingm = ['宁波', '台州', '焦作', '邢台', '嘉兴'];
          option = {

            grid: {
              left: '10%',  //如果离左边太远就用这个......
              right: '10%',
              bottom: '0%',
              top: '5%',
              containLabel: true
            },
            xAxis: [{
              show: false,
            },
            {
              show: false,
            }
            ],
            yAxis: {
              type: 'category',
              axisLabel: {
                show: true, //让Y轴数据不显示
              },

              axisTick: {
                show: false, //隐藏Y轴刻度
              },
              axisLine: {
                show: false, //隐藏Y轴线段
              },
            },
            series: [
              //背景色
              {
                show: true,
                type: 'bar',
                barGap: '-100%',
                barWidth: '20%', //统计条宽度 
                itemStyle: {
                  normal: {
                    barBorderRadius: 50,
                    color: 'rgba(41, 55, 94)'
                  },
                },
                z: 1,
                data: grayBar,
              },
              //蓝条
              {
                show: true,
                type: 'bar',
                barGap: '-100%',
                barWidth: '20%', //统计条宽度
                itemStyle: {
                  normal: {
                    barBorderRadius: 50, //统计条弧度
                    color: {
                      colorStops: [{
                        offset: 0,
                        color: '#5d29f7' // 0% 处的颜色
                      }, {
                        offset: 1,
                        color: '#5093fb' // 100% 处的颜色
                      }],
                      globalCoord: false, // 缺省为 false

                    }
                  },
                },
                max: 1,
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: '#fff', //百分比颜色
                      
                    },
                    position: [0,-20],
                    rich: { //富文本
                      yellow: {
                        color: '#FEC735',
                      }
                    },
                    formatter: function (data) {
                      //富文本固定格式{colorName|这里填你想要写的内容}
                      if (paiming[data.dataIndex] == 1 || paiming[data.dataIndex] == 2 || paiming[data.dataIndex] == 3) {
                        return '{yellow|' + paiming[data.dataIndex] + '  ' + xingm[data.dataIndex] + '}';
                      } else {
                        return paiming[data.dataIndex] + '  ' + xingm[data.dataIndex]
                      }

                    },

                  }
                },
                data: baifenbi,
              },

            ]
          };

          progress1chart.setOption(option)
        },

      },
      beforeDestroy: function () {

      }
    })
  </script>

  <style>
    .mainbox {
      height: 90%;
    }

    .column {
      height: 100%;
    }

    .panel {
      height: 33.3%;
    }
  </style>

  <script>
    // 柱状图1模块
    (function () {
        // 实例化对象
        var myChart = echarts.init(document.querySelector(".bar .chart"));
        // 指定配置和数据
        var option = {
          color: ["#2f89cf"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              data: [
                "旅游行业",
                "教育培训",
                "游戏行业",
                "医疗行业",
                "电商行业",
                "社交行业",
                "金融行业"
              ],
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: "12"
                }
              },
              axisLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: "12"
                }
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)"
                  // width: 1,
                  // type: "solid"
                }
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)"
                }
              }
            }
          ],
          series: [
            {
              name: "直接访问",
              type: "bar",
              barWidth: "35%",
              data: [200, 300, 300, 900, 1500, 1200, 600],
              itemStyle: {
                barBorderRadius: 5
              }
            }
          ]
        };

        // 把配置给实例对象
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });

      })();

    // 折线图定制 台秤总数年变化
    (function () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector(".line .chart"));

      // (1)准备数据
      var data = {
        year: [
          [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ]
      };

      // 2. 指定配置和数据
      var option = {
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            dataView: {
              readOnly: false
            },
            magicType: {
              type: ["line", "bar"]
            },
            restore: {},
            saveAsImage: {}
          }
        },
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          // 通过坐标轴来触发
          trigger: "axis"
        },
        legend: {
          // 距离容器10%
          left: "10%",
          // 修饰图例文字的颜色
          textStyle: {
            color: "#4c9bfd"
          },
          // 如果series 里面设置了name，此时图例组件的data可以省略
          data: ["台秤数", "新增市场数"]
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true,
          borderColor: "#012f4a",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.7)'
            }
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          // 去除刻度
          axisTick: {
            show: false
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: "rgba(255,255,255,.7)"
          },
          // 去除x坐标轴的颜色
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          // 去除刻度
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#012f4a'
            }
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: "rgba(255,255,255,.7)"
          },
          // 修改y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "#012f4a"
            }
          }
        },
        series: [
          {
            name: "台秤数",
            type: "line",
            smooth: true,
            // stack: "总量",
            // 是否让线条圆滑显示
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(219, 50, 51, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(219, 50, 51, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(219,50,51)'
              }
            },
            data: data.year[0]
          },
          {
            name: "新增市场数",
            type: "line",
            // stack: "总量",
            smooth: true,
            data: data.year[1]
          }
        ]
      };
      // 3. 把配置和数据给实例对象
      myChart.setOption(option);

      // 重新把配置好的新数据给实例对象

      window.addEventListener("resize", function () {
        myChart.resize();
      });
    })();


    // 折线图 
    (function () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector(".line1 .chart"));

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#dddc6b"
            }
          }
        },
        legend: {
          top: "0%",
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
        },
        grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)"
              }
            },

            data: [
              "01",
              "02",
              "03",
              "04",
              "05",
              "06",
              "07",
              "08",
              "09",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
              "25",
              "26",
              "27",
              "28",
              "29",
              "30"
            ]
          },
          {
            axisPointer: { show: false },
            axisLine: { show: false },
            position: "bottom",
            offset: 20
          }
        ],

        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },

            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
            name: "订单数",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#0184d5",
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
              }
            },
            itemStyle: {
              normal: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
              }
            },
            data: [
              30,
              40,
              30,
              40,
              30,
              40,
              30,
              60,
              20,
              40,
              20,
              40,
              30,
              40,
              30,
              40,
              30,
              40,
              30,
              60,
              20,
              40,
              20,
              40,
              30,
              60,
              20,
              40,
              20,
              40
            ]
          },
          {
            name: "收入数",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
              }
            },
            itemStyle: {
              normal: {
                color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
              }
            },
            data: [
              50,
              30,
              50,
              60,
              10,
              50,
              30,
              50,
              60,
              40,
              60,
              40,
              80,
              30,
              50,
              60,
              10,
              50,
              30,
              70,
              20,
              50,
              10,
              40,
              50,
              30,
              70,
              20,
              50,
              10,
              40
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    })();

    // 点位分布统计模块
    (function () {
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".pie1  .chart"));
      // 2. 指定配置项和数据
      var option = {
        legend: {
          top: "90%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff"
        ],
        series: [
          {
            name: "点位统计",
            type: "pie",
            // 如果radius是百分比则必须加引号
            radius: ["10%", "70%"],
            center: ["50%", "42%"],
            roseType: "radius",
            data: [
              { value: 20, name: "西安" },
              { value: 26, name: "北京" },
              { value: 24, name: "上海" },
              { value: 25, name: "其他" },
              { value: 20, name: "武汉" },
              { value: 25, name: "杭州" },
              { value: 30, name: "深圳" },
              { value: 42, name: "广州" }
            ],
            // 修饰饼形图文字相关的样式 label对象
            label: {
              fontSize: 10
            },
            // 修饰引导线样式
            labelLine: {
              // 连接到图形的线长度
              length: 10,
              // 连接到文字的线长度
              length2: 10
            }
          }
        ]
      };

      // 3. 配置项和数据给我们的实例化对象
      myChart.setOption(option);
      // 4. 当我们浏览器缩放的时候，图表也等比例缩放
      window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
      });
    })();


  </script>



</body>

</html>